/**index.wxss**/
.nav-list {
  width: ~'160rpx';
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  background-color: #eaeaea;
  padding-bottom: ~'110rpx';
  height: 100vh;
  .nav-item {
    height: ~'80rpx';
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: @font-size-xxx;
    &.active {
      background-color: #fff;
      color: #222222;
    }
  }
}

.main {
  width: ~'590rpx';
  height: 100vh;
  float: right;
  box-sizing: border-box;
  padding-bottom: ~'100rpx';
  .title {
    font-size: @font-size-xx;
    padding: ~'8rpx';
  }
  .food {
    height: ~'200rpx';
    display: flex;
    align-items: center;
    .f-img-box {
      height: ~'180rpx';
      padding: ~'10rpx';
      .f-img {
        .large-img;
      }
    }
    .f-context {
      flex: 1;
      height: ~'180rpx';
      position: relative;
      .f-title {
        font-weight: bold;
        font-size: @font-size-xx;
        padding: ~' 10rpx';
        padding-top: 0;
      }
      .f-intr {
        font-size: @font-size-x;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: ~' 8rpx';
        color: #999;
      }
      .f-sold {
        margin: ~'8rpx';
        font-size: @font-size-x;
        color: #999;
      }
      .f-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .f-price-box {
          display: flex;
          align-items: flex-end;
          margin: ~'8rpx';
          .f-price {

            font-size: @font-size-xxx;
            color: #f05a5a;
            margin-right: ~' 8rpx';
          }
          .f-discount {

            font-size: @font-size-x;
            color: #999;
            text-decoration: line-through;
          }
        }
        .f-handle {

          display: flex;
          margin-right: ~' 40rpx';
          .f-subtract {
            display: flex;
          }
          .operation {
            display: flex;
            .operation-icon {
              .mini-icon-img;
            }
          }
          .f-count {
            min-width: ~'40rpx';
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

.food-container {
  position: fixed;
  width: ~'750rpx';
  //height: 100vh;
  left: 0;
  top: 0;
  z-index: 100;
  background-color: #99999930;
  .food-par {
    position: absolute;
    bottom: 0;
    left: 0;
    width: ~'750rpx';
    height: 100vh;
    background-color: #fff;
    &.open {
      animation: pop-up 0.2s ease-in;
    }
    &.hide{
      animation: pop-down 0.2s ease-in;
    }
    .close {
      position: absolute;
      right: ~'24rpx';
      top: ~'24rpx';
      width: ~'60rpx';
      height: ~'60rpx';
      .close-icon {
        width: ~'60rpx';
        height: ~'60rpx';
      }
    }
    .f-par-img {
      width: ~'750rpx';
      .big-food-img {
        width: ~'750rpx';
      }
    }
    .f-par-context {
      padding: ~'24rpx';
      position: relative;
      .f-par-title {
        font-weight: bold;
        font-size: ~' 32rpx';
        padding: ~'10rpx';
      }
      .f-intr {
        font-size: @font-size-xx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: ~' 8rpx';
        color: #999;
      }
      .f-sold {
        margin: ~'8rpx';
        font-size: @font-size-xx;
        color: #999;
      }
      .f-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .f-price-box {
          display: flex;
          align-items: flex-end;
          margin: ~'8rpx';
          .f-price {
            font-size: @font-size-xxx;
            color: #f05a5a;
            margin-right: ~' 8rpx';
          }
          .f-discount {
            font-size: @font-size-x;
            color: #999;
            text-decoration: line-through;
          }
        }
        .f-handle {
          display: flex;
          margin-right: ~'40rpx';
          .f-subtract {
            display: flex;
          }
          .operation {
            display: flex;
            .operation-icon {
              .mini-icon-img;
            }
          }
          .f-count {
            min-width: ~'40rpx';
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

.shop-car {
  position: fixed;
  width: ~'750rpx';
  height: ~'100rpx';
  bottom: 0;
  left: 0;
  background-color: #e1f00f;
  z-index: 999;
}

.footer-nav {
  position: fixed;
  width: ~'750rpx';
  height: ~'110rpx';
  bottom: 0;
  left: 0;
  background-color: #e1f00f;
  z-index: 999;
  .footer-content {
    position: absolute;
    left: 0;
    bottom: 0;
    width: ~' 750rpx';
    height: ~'80rpx';
    background-color: #7c2f2f;
    .footer-iocn-box {
      width: ~'80rpx';
      height: ~'80rpx';
      position: absolute;
      left: ~'40rpx';
      bottom: ~'10rpx';
      background-color: #fff;
      border-radius: ~'80rpx';
      .shopCar-icon {
        .mini-icon-img;
        padding: ~'16rpx';
      }
    }
    .footer-context {
      width: ~'590rpx';
      height: ~'80rpx';
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding-right: ~'40rpx';
      color: #fff;
      font-size: @font-size-xxx;
    }
  }
}

@keyframes pop-up {
  100% {
    height: 100vh;
  }
}

@keyframes pop-down {
  0% {
    height: 100vh;
  }
  100% {
    height: 0;
  }
}
